<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.marquee.min.js"></script>
    <script type="text/javascript" src="json/media.json"></script>
    <script type="text/javascript" src="json/line.json"></script>
    <script type="text/javascript" src="json/config.json"></script>
    <script type="text/javascript" src="json/notice.json"></script>
    <script type="text/javascript" src="js/BusMedia.js"></script>
    <script type="text/javascript" src="js/BusLine.js"></script>
    <script type="text/javascript" src="js/BusNotice.js"></script>
</head>
<body>
<div class="page-wrapper">
    <div class="page-top">
        <h1 id="currentTime"></h1>
        <strong>当前站: <span>博物馆</span></strong>
    </div>
    <div class="page-center">
        <div class="left">
            <div><img src="img/wmcc.jpg" style="width:470px;height:236px"></div>
            <div><img src="img/ewm.jpg" style="width:244px;height:230px">
            </div>
            <div id="video">
                <div style="width:100%;height:100%">
                    <div id="mylive" style="width:100%;height:100%;background-color:#000">
                        <iframe id="frameVideo" style="width:100%;height:100%;" frameborder="0"></iframe>
                    </div>
                    <video id="myvideo" style="width:100%;height:100%;object-fit: fill">
                        你的浏览器不支持HTML5播放此视频
                        <span style="white-space:pre">    </span><!-- 支持播放的文件格式 -->
                    </video>
                    <div id="myimage" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
            <div class="layer-wrap">
                <p class="arrive-route"></p>
            </div>
        </div>
        <div class="right">
            <div id="lineContainer">
            </div>
        </div>
    </div>
    <div class="page-footer">
        <!--<div id="mynotice" class="marquee"></div>-->
        <marquee behavior="scroll">你让座，我让座，温馨公交暖老弱；你文明，我文明，和谐社会更闻名。我让座，把温馨留给老弱；我让路，把方便留给急救；我让先，把文明留给未来。</marquee>
    </div>
</div>
</body>
<script type="text/html" id="LineHtml">
    <div>
        <div class="station-wrap">
            <div class="left">
                <h4 class="car-tips">尚未发车</h4>
                <div>
                    <h3 class="car-no">120路</h3>
                    <dl>
                        <dt><i>起</i><em></em></dt>
                        <dt><i>终</i><em></em></dt>
                        <dd>首班时间<span></span></dd>
                        <dd>末班时间<span></span></dd>
                    </dl>
                </div>
            </div>
            <div class="right">
                <div class="cars-pos">
                </div>
                <ul class="line-info">

                </ul>
            </div>
        </div>
    </div>
</script>
<script>
    $(function () {
        // region << 视频初始化 >>
        BusMedia.init({
            "regioncode": "REGION_VIDEO_A",
            "videodomid": "myvideo",
            "imagedomid": "myimage",
            "livedomid": "mylive",
            "isshowcontrol": true
        });
        BusMedia.play();
        // endregion

        // region << 公告初始化 >>
        BusNotice.init({
            "regioncode": "REGION_NOTICE_A",
            "noticedomid": "mynotice",
            "speed": "20",
            "direction": "0"
        });
        BusNotice.play();
        // endregion

        // region << 线路初始化 >>
        BusLine.init({
            "regioncode": "REGION_NOTICE_A",
            'lineId': 'lineContainer',
            'time': 2000 /*秒*/,
            pageSize: 3,
            pageIndex: 1
        });
        // endregion
    });

    setInterval(function () {
        var d = new Date();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var time = ((d.getHours() < 10 ? '0' : '') + d.getHours())
            + ":" + ((d.getMinutes() < 10 ? '0' : '') + d.getMinutes())
            + ":" + ((d.getSeconds() < 10 ? '0' : '') + d.getSeconds());
        var output = d.getFullYear() + '-'
            + (month < 10 ? '0' : '') + month + '-'
            + (day < 10 ? '0' : '') + day
            + " " + time;
        $("#currentTime").text(output);
    }, 1000);
</script>

</html>